<template>
	<view class="content">
		
		<view style="display: flex;flex-wrap: wrap;width: 100%;background: white;padding: 15rpx;">
			<u-grid :border="false" :col="5">
					<u-grid-item v-for="(user,k) in (group[id] ? group[id].members : [])" >
						<view style="display: flex;flex-direction: column;align-items: center;">
							<image :src="user.avatar" style="width: 100rpx;height: 100rpx;border-radius: 10rpx;" mode=""></image>
							<view style="text-align: center;color: #7d7d7d;margin-top: 10rpx;font-size: 26rpx;" class="u-line-1">
								{{user.name}}
							</view>
						</view>
					</u-grid-item>
					<u-grid-item v-if="(group[id] ? group[id].user_id : '') == $store.state.user.user.id">
						<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
							<image @click="addusertog" src="/static/images/icon_addu2g.png" style="width: 100rpx;height: 100rpx;" mode=""></image>
						</view>
					</u-grid-item>
			</u-grid>
			
		</view>
		
		<view style="display: flex;flex-direction: column; width: 100%;background: white;padding: 1rpx 15rpx;margin-top: 20rpx;">
			<u-cell-group title="群聊信息" :border="false">
					<u-cell-item v-if="group[id].user_id == $store.state.user.user.id" @click="showChangeInfo = true" icon="setting-fill" title="群聊名称" :value="group[id].name" :arrow="group[id].user_id == $store.state.user.user.id"></u-cell-item>
					<u-cell-item v-if="group[id].user_id == $store.state.user.user.id" @click="showChangeInfo = true" :border-bottom="false" icon="info-circle-fill" title="群聊公告" :value="group[id].note" :arrow="group[id].user_id == $store.state.user.user.id"></u-cell-item>
					<u-cell-item v-if="group[id].user_id != $store.state.user.user.id"  icon="setting-fill" title="群聊名称" :value="group[id].name" :arrow="group[id].user_id == $store.state.user.user.id"></u-cell-item>
					<u-cell-item v-if="group[id].user_id != $store.state.user.user.id" :border-bottom="false" icon="info-circle-fill" title="群聊公告" :value="group[id].note" :arrow="group[id].user_id == $store.state.user.user.id"></u-cell-item>
				</u-cell-group>
		</view>
		
		<view @click="deleteGroup" v-if="group[id].user_id == $store.state.user.user.id" style="width: 100%;color:crimson;font-weight: 500; margin: 20rpx auto;display: flex;justify-content: center;background: #ffffff;padding: 32rpx;border-radius: 8rpx;">
			解散群聊
		</view>
		
		<view @click="exitGroup" v-else style="width: 100%;color:crimson;font-weight: 500; margin: 35rpx auto;display: flex;justify-content: center;background: #ffffff;padding: 32rpx;border-radius: 8rpx;">
			退出群聊
		</view>
		
		<u-popup @close="closePop" v-model="showChangeInfo" mode="center" border-radius="16">
			<view style="padding: 30rpx;display: flex;flex-direction: column;width: 600rpx;">
				<view style="margin: 10rpx 0rpx 20rpx 0rpx;font-weight: 500;font-size: 36rpx;">
					更改群信息
				</view>
				<u-input v-model="name" type="text" :border="true" />
				<view style="margin-top: 20rpx;">
					
				</view>
				<u-input v-model="note" type="textarea" :border="true" />
				<view style="margin: 30rpx auto 10rpx auto;font-weight: 500;">
					<u-button @click="changeInfo" shape="circle" type="primary" size="medium">确定</u-button>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data(){
			return {
				id:'',
				showChangeInfo:false,
				name:'',
				note:''
			}
		},
		onLoad({id}) {
			this.id = id
			uni.setNavigationBarTitle({
				title:this.group[this.id].name + "("+this.group[this.id].members.length+")"
			})
			this.name = this.$store.state.gchat.group[this.id].name
			this.note = this.$store.state.gchat.group[this.id].note
		},
		computed: {
			...mapState({
				group: state => {
					return state.gchat.group
				},
			})
		},
		watch:{
			group:function(){
				console.log(11111111111)
			},
		},
		methods:{
			deleteGroup:function(){
				uni.showLoading({
					title:"数据删除.."
				})
				const _this = this
				_this.$socket.send({
					type:"deleteGroup",
					data:{
						group_id:_this.id
					}
				})
				this.$store.dispatch({
					type:"gchat/deleteGroup",
					payload:{
						group_id:_this.id,
						callback:function(){
							
						}
					}
				})
				uni.hideLoading()
			},
			exitGroup:function(){
				uni.showLoading({
					title:"正在退出.."
				})
				const _this = this
				_this.$socket.send({
					type:"exitGroup",
					data:{
						group_id:_this.id,
						user_id:_this.$store.state.user.user.id
					}
				})
				this.$store.dispatch({
					type:"gchat/exitGroup",
					payload:{
						group_id:_this.id,
						callback:function(){
							setTimeout(()=>{
								uni.hideLoading()
							},1000)
						}
					}
				})
				
			},
			addusertog:function(){
				uni.navigateTo({
					url:"/pages/index/makegroup/adduser?id="+this.id
				})
			},
			changeInfo:function(){
				console.log(123123)
				const _this = this
				this.$store.dispatch({
					type:"gchat/setGroupInfo",
					payload:{
						id:this.id,
						name:this.name,
						note:this.note,
						callback:function(){
							console.log(1231232)
							_this.showChangeInfo = false
							_this.$socket.send({
								type:"changeGroupInfo",
								data:{
									group_id:_this.id
								}
							})
						}
					}
				})
				
			},
			closePop:function(){
				this.name = this.$store.state.gchat.group[this.id].name
				this.note = this.$store.state.gchat.group[this.id].note
			}
		}
	}
</script>

<style scoped>
	.content{
		width: 100%;
		background: #f5f5f5;
		height: 100vh;
		overflow: auto;
		display: flex;
		flex-direction: column;
	}
</style>